import React from 'react';
import { useIntl } from 'umi';

import Tabs, { TabsProps } from '@/components/Tabs';
import Style from '../../components/batteryIndex.less';

import {
  BatteryClusterOverview,
  BatteryModuleOverview,
  // FaultOverview,
  OfflineOverview,
} from '../../components/overviews';

export const Overview: React.FC = () => {
  const intl = useIntl();
  const items: TabsProps['items'] = [
    // {
    //   key: 'fault',
    //   label: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultOverview' }),
    //   children: <FaultOverview />,
    // },
    {
      key: 'offline',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.offlineOverview' }),
      children: <OfflineOverview />,
    },

    {
      key: 'batteryCluster',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.batteryClusterOverview' }),
      children: <BatteryClusterOverview />,
    },
    {
      key: 'batteryModule',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.batteryModuleOverview' }),
      children: <BatteryModuleOverview />,
    },
    // {
    //   key: 'batteryCell',
    //   label: intl.formatMessage({ id: 'stationRealtimeMonitoring.batteryCellOverview' }),
    //   children: <BatteryCellOverview />,
    // },
  ];

  return <Tabs items={items} className={Style.secondTabs} />;
};
